import { Button, Card, NavBar, ResultPage, SearchBar, Swiper, Tabs } from 'antd-mobile'
import React from 'react'
import { Grid } from 'react-vant'
import { ShopO, NewspaperO, DesktopO, HotelO, FlagO, LikeO,Logistics } from '@react-vant/icons'
import styles from './css/home.module.css'
import { LoopOutline,RightOutline,BellOutline,HandPayCircleOutline,TeamOutline } from 'antd-mobile-icons'
const Home = () => {

    const data = [
        './images/1.jpg',
        './images/2.jpg',
        './images/3.jpg',
        './images/4.jpg',
    ]
    return (
        <div>

            <NavBar backIcon={false}>首页</NavBar>
            <Tabs>
                <Tabs.Tab title='机票' key='fruits'>
                    机票
                    <ResultPage
                        status=''
                        title=''
                        description='一张票.一段旅程.享受自由'
                    >
                        <ResultPage.Card style={{ padding: 8 }} >
                            <div className={styles.row}>
                                <span className={styles.start}>北京</span>
                                <LoopOutline fontSize={22} />
                                <span className={styles.end}>上海</span>
                            </div>
                            <div className={styles.row}>
                                <span className={styles.date}>11月1日明天</span>
                                <span className={styles.lidian}>明天离店</span>
                            </div>
                            <div className={styles.row}>
                                <span className={styles.zw}>经济/公务/头等舱<RightOutline fontSize={15}/></span>
                                <span className={styles.ccr}>1成人 0儿童0婴儿<RightOutline fontSize={15}/></span>
                            </div>
                            <div className={styles.row}>
                                <Button block color='warning' size='large' style={{ marginTop: 10 }}>
                                    开始搜索
                                </Button>
                            </div>
                        </ResultPage.Card>

                        <Card style={{ height: 100, marginTop: 10 }}>
                         <Grid>
                        <Grid.Item icon={<BellOutline />} text='低价提醒' />
                        <Grid.Item icon={<HandPayCircleOutline />} text='酒店优惠' />
                        <Grid.Item icon={<TeamOutline />} text='学生特权' />
                        <Grid.Item icon={<Logistics  />} text='接送机' />
                    </Grid>
                        </Card>
                    </ResultPage>
                </Tabs.Tab>
                <Tabs.Tab title='火车票' key='vegetables'>
                    <SearchBar placeholder='请输入关键字' />
                    <Swiper loop autoplay>
                        {
                            data.map((v, i) => {
                                return <Swiper.Item key={i}>
                                    <img src={v} alt='' style={{
                                        width: "100%", height: "150px"
                                    }} />
                                </Swiper.Item>
                            })
                        }
                    </Swiper>

                    <Grid>
                        <Grid.Item icon={<NewspaperO />} text='酒店' />
                        <Grid.Item icon={<DesktopO />} text='机票' />
                        <Grid.Item icon={<ShopO />} text='火车票' />
                        <Grid.Item icon={<ShopO />} text='旅行' />
                        <Grid.Item icon={<HotelO />} text='民宿/公寓' />
                        <Grid.Item icon={<LikeO />} text='情侣专属' />
                        <Grid.Item icon={<ShopO />} text='周边游' />
                        <Grid.Item icon={<FlagO />} text='跟团走' />
                    </Grid>
                </Tabs.Tab>
                <Tabs.Tab title='汽车票' key='animals'>
                    汽车票
                </Tabs.Tab>
                <Tabs.Tab title='船票' key='cp'>
                    船票
                </Tabs.Tab>
            </Tabs>
        </div>
    )
}

export default Home
